<div fxLayout="row wrap">
  <div fxFlex.gt-sm="50">
    <analysis-preference-field [data]="field_data"></analysis-preference-field>
  </div>
  <div fxFlex.gt-sm="50">
    <mat-card>
      <mat-card-title>人群应用偏好</mat-card-title>
      <mat-card-content class="fixedHeight">
        <table class="table">
          <tr>
            <th>排名</th>
            <th>领域</th>
            <th>覆盖</th>
            <th></th>
            <th>全部应用</th>
          </tr>
          <tr *ngFor="let coverRateListData of coverRateListDatas; index as i">
            <td width="60"><span class="num">{{i+1}}</span></td>
            <td width="32%"><a href="javascrip:;" data-id="{{coverRateListData.cateId}}">{{coverRateListData.categoryName}}</a>
            </td>
            <td>
              <div class="progress">
                <span class="progress-bar" [ngStyle]="{'width':coverRateListData.coverRate | percent:'1.1-2'}"></span>
              </div>
            </td>
            <td width="80">{{coverRateListData.coverRate | percent:'1.1-2'}}</td>
            <td width="100">偏好应用</td>
          </tr>
        </table>
      </mat-card-content>
    </mat-card>
  </div>
</div>

<mat-card>
  <mat-card-title>人群应用偏好</mat-card-title>
  <mat-card-content>
    <table class="table">
      <tr>
        <th>排名</th>
        <th>应用</th>
        <th>领域</th>
        <th>开发商</th>
        <th>月活跃用户(万)</th>
        <th>人群活跃(万)</th>
        <th>人群应用TGI</th>
        <th>人群渗透率(%)</th>
        <th>人群占比(%)</th>
      </tr>
      <tr *ngFor="let activeData of activeDatas; index as i">
        <td><span class="num">{{i+1}}</span></td>
        <td><a href="javascrip:;">{{activeData.appName}}</a></td>
        <td><span *ngFor="let category of activeData.categorys">{{category.cateName}} </span></td>
        <td>{{activeData.devlopCompanyName}}</td>
        <td>{{activeData.activeNums}}</td>
        <td>{{activeData.crowdActiveNums}}</td>
        <td>{{activeData.tgi | number:'1.2-2'}}</td>
        <td>{{activeData.crowdRate | percent:'1.1-2' }}</td>
        <td>{{activeData.crowdPercent | percent:'1.1-2'}}</td>
      </tr>
    </table>
  </mat-card-content>
</mat-card>